﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片软加载效果</title>
<script type="text/javascript" src="http://www.bhu.ac.cn/js/jquery.1.8.3.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
<style>
.abc{ width:500px; height:200px; margin:0 auto 50px; }
</style>
</head>

<body>
<div class="abc"><img class="lazy" src="grey.gif" data-original="http://www.bhu.ac.cn/image/01.jpg" width="500" height="200" /></div>
<div class="abc"><img class="lazy" src="grey.gif" data-original="http://www.bhu.ac.cn/image/02.jpg" width="500" height="200" /></div>
<div class="abc"><img class="lazy" src="grey.gif" data-original="http://www.bhu.ac.cn/image/03.jpg" width="500" height="200" /></div>
<div class="abc"><img class="lazy" src="grey.gif" data-original="http://www.bhu.ac.cn/image/04.jpg" width="500" height="200" /></div>
<div class="abc"><img class="lazy" src="grey.gif" data-original="http://www.bhu.ac.cn/image/05.jpg" width="500" height="200" /></div>
<div class="abc"><img class="lazy" src="grey.gif" data-original="http://www.bhu.ac.cn/image/06.jpg" width="500" height="200" /></div>
<div class="abc"><img class="lazy" src="grey.gif" data-original="http://www.bhu.ac.cn/image/07.jpg" width="500" height="200" /></div>
<div class="abc"><img class="lazy" src="grey.gif" data-original="http://www.bhu.ac.cn/image/08.jpg" width="500" height="200" /></div>
<div class="abc"><img class="lazy" src="grey.gif" data-original="http://www.bhu.ac.cn/image/09.jpg" width="500" height="200" /></div>
<div class="abc"><img class="lazy" src="grey.gif" data-original="http://www.bhu.ac.cn/image/10.jpg" width="500" height="200" /></div>
<script>
    isMobDevice = (/iphone|ipad|Android|webOS|iPod|BlackBerry|Windows Phone|ZuneWP7/gi).test(navigator.appVersion);
    if(!isMobDevice){
        $("img.lazy").lazyload({effect: "fadeIn"});
    }else{
        $('img.lazy').each(function(){
            $(this).attr('src',$(this).data('original'));
        });
    }
</script>
</body>
</html>
